<template>
	<jf-navigation>
		<view>{{$t('index.setting.jurisdiction.navigation')}}</view>
	</jf-navigation>
	
	<template v-for="(item,index) in 4" :key="index">
		<view class="jurisdiction_item">
			<view class="jurisdiction_item_left">
				<view class="jurisdiction_item_title">{{$t('index.setting.jurisdiction.title' + item)}}</view>
				<view class="jurisdiction_item_desc">{{$t('index.setting.jurisdiction.desc' + item)}}</view>
			</view>
			<view class="jurisdiction_item_right">
				<view class="">{{$t('index.setting.jurisdiction.setting')}}</view>
				<image src="@/static/images/index/icon014.png"></image>
			</view>
		</view>
	</template>
</template>

<script lang="ts" setup>
	
	
</script>

<style lang="scss">
	.jurisdiction_item{
		@include layout();
		width: 686rpx;
		padding: 32rpx;
		border-bottom: 2rpx solid #F2F4F6;
		.jurisdiction_item_left{
			flex-grow: 1;
			.jurisdiction_item_title{
				font-weight: 400;
				line-height: 36rpx;
				font-size: 28rpx;
			}
			.jurisdiction_item_desc{
				font-weight: 400;
				color: #707782;
				line-height: 36rpx;
				font-size: 24rpx;
				margin-top: 12rpx;
			}
		}
		.jurisdiction_item_right{
			@include layout();
			font-weight: 400;
			color: #707782;
			line-height: 36rpx;
			font-size: 24rpx;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 2rpx;
			}
		}
	}
</style>